<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === '用户管理' ? 'active' : '' " @click="menu = '用户管理'">用户管理</div>
			<div :class="menu === 'Onvif用户' ? 'active' : '' " @click="menu = 'Onvif用户'">Onvif用户</div>
		</div>

		<div v-show="menu === '用户管理'" style="margin: 40px 60px;height:620px" >
			<div class="wos-flex wos-flex-between">
				<div class="wos-menu wos-hand" >
					<div :class="menu1 === '用户' ? 'active' : '' " @click="menu1 = '用户'">用户</div>
					<div :class="menu1 === '组' ? 'active' : '' " @click="menu1= '组'">组</div>
				</div>
				<div>
					<div class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<div v-show="menu1 === '用户'">
				<wos-table :record="users"></wos-table>
			</div>
			<div v-show="menu1 === '组'">
				<wos-table :record="group"></wos-table>
			</div>
		</div>
		<div v-show="menu === 'Onvif用户'" style="margin: 40px 60px;height:620px" >
			<div class="wos-flex wos-flex-between">
				<div >
				</div>
				<div>
					<div class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<wos-table :record="onvif"></wos-table>
		</div>
		<div class="console">
			<button >刷新</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "users",
	    data:function() {
            return {
                menu: "用户管理",
                menu1: "用户",
	            users:"",
	            group:""
            }
        },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/configure/users.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.users = response.data.users
	                        that.group = response.data.group
	                        that.onvif = response.data.onvif
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            },
            refresh(){
                this.getData()
                this.jumpTop()
            },
            add(){

            }
        }
    }
</script>

<style scoped>

</style>
